<template>
    <div class="category">
        <main class="content_main wrap">
        <section class="articleList">
            <h1>
                Browsing:
                <span class="typeName">
                    FASHION
                </span>
            </h1>

            <article class="posts" v-for="(item,index) in categoryArticleList" :key="index">
                <div class="media">
                        <router-link to="/" @click="toDeatil(item)" >
                                        <div class="bgImg bgBox7 lazyloaded"
                                        :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                            data-sizes="(max-width: 135px) 100vw, 135px"
                                            >
                                        </div>
                                    </router-link>
                    </div>
                <div class="contentText">
                    <h2>
                        <router-link to="/" @click="toDeatil(item)" >
                            {{ item.newsTitle }}
                        </router-link>
                    </h2>
                    <div class="publicTime">
                        By
                        <router-link to="/" @click="toDeatil(item)"  class="author">

                           {{ item.author }} —
                        </router-link >
                        <time :datetime="item.publicTime">{{ item.publicTime }}</time>
                    </div>
                    <p class="desc">
                        {{ item.seoText }}
                    </p>
                </div>
            </article>
            <!-- 分页器 -->
            <div id="demo-laypage-pn-hide"></div>
        </section>
        <div class="aside">
            <section class="relatedPosts">
                <div class="categoryTitle">
                    <h2 class="heading">
                            Related Articles
                    </h2>
                </div>
                <article class="post subPosts" v-for="(item,index) in trendingArticles" :key="index">
                    <div class="media">
                        <router-link to="/" @click="toDeatil(item)" :title="item.newsTitle">
                                <div class="bgImg bgBox4 lazyloaded"
                                :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                        data-sizes="(max-width: 135px) 100vw, 135px"
                                    >
                                </div>
                            </router-link>
                    </div>
                    <div class="postsText">
                            <h4 class="postsTitle">
                                <router-link to="/" @click="toDeatil(item)" >
                                        {{ item.newsTitle }}
                                    </router-link>
                            </h4>

                            <time class="postsDate" :datetime="item.publicTime">{{ item.publicTime }}</time>
                        </div>
                </article>

            </section>
            <div class="AFC">
                AFC广告
            </div>
        </div>
    </main>
    </div>
</template>

<script setup>
import {ref,inject} from 'vue'
import { articleData,createDate } from '@/utils/common.js'
import { useRoute } from 'vue-router'
const route = useRoute()


const category = route.params.type
const categoryArticleList = articleData[category]
// 共享侧边栏
const trendingArticles = inject("trendingArticles")

</script>

<style lang="scss">
    $text_color1: #45414b;
    $date_color: rgb(138, 138, 138);
    $border-color1:#e2e2e2;
    .category{
        margin-top: 20px;
    }
</style>